<template>

  <table>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
      <Btn type='a'>添加</Btn>

    </tr>
    <tr v-for="item in list" :key="item.id">
      <td>{{ item.name }}</td>
      <td>{{ item.age }}</td>
      <td>{{ item.city }}</td>

      <td>
        <Btn type='t'>编辑</Btn>
        <Btn type='f'>删除</Btn>
      </td>
    </tr>
  </table>

</template>

<script setup lang='ts'>
import { ref, h } from 'vue';

const list = [
  {
    id: 1,
    name: "Alice",
    age: 28,
    city: "New York",
    isActive: true
  },
  {
    id: 2,
    name: "Bob",
    age: 34,
    city: "Los Angeles",
    isActive: false
  },
  {
    id: 3,
    name: "Charlie",
    age: 22,
    city: "Chicago",
    isActive: true
  },
  {
    id: 4,
    name: "David",
    age: 45,
    city: "San Francisco",
    isActive: true
  },
  {
    id: 5,
    name: "Eva",
    age: 31,
    city: "Seattle",
    isActive: false
  },
  {
    id: 6,
    name: "Frank",
    age: 27,
    city: "Austin",
    isActive: true
  }
];

interface Props {
  type: 't' | 'f' | 'a'
}
// 省略props属性的方式是
const Btn = (props: Props, ctx: any) => {
  return h('button', {
    style: {
      color: props.type == 't' ? 'red' : 'blue'
    },
    onClick: () => {
      // ctx.emit('click', 123)
      if (props.type == 't') {
        console.log('编辑')
      } else if (props.type == 'f') {
        console.log('删除')
      }
      else {
        console.log('添加')
      }
      // console.log('click')
    }
  }, ctx.slots.default())
}
</script>
<style scoped></style>